<template>
    <div>
        <div style="display:flex;align-items:center;margin-left:15px;margin-top:5px;">
            <div style="display:flex;align-items:center;margin-right:10px">
                <span>退休年龄-男职工：</span>
                <a-input-number id="inputNumbernzg" v-model="formState.fmaletxnl" :min="0" :precision="0" placeholder="请输入男职工退休年龄"/>
            </div>
            <div style="display:flex;align-items:center;">
                <span>退休年龄-女职工：</span>
                <a-input-number id="inputNumbermnzg" v-model="formState.ffemaletxnl" :min="0" :precision="0" placeholder="请输入女职工退休年龄"/>
            </div>
            <div style="margin-left:10px;">
                <a-button class="blue-btn" type="primary" icon="plus" @click="generateListData()">生成列表</a-button>
            </div>
        </div>
        <div>
            <commpVxeTable
            :key="refreshTable"
            ref="headmanVxeTable"
            :config="config" 
            :columns="columnsVxe" 
            :formItem="formItem"
            :conditionBtnRow="true"
            :occupancyHeight="40"
            @checkboxChange="checkboxChange"
            @searchEvent="searchEvent"
            > 
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="user-delete" @click="unbindClick()">解聘</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button type="primary" icon="export" ghost @click="exportClick()">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" icon="delete" @click="deleteClick">删除</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:sex_default="{row}">
                    <span>{{ row.sex == 1?'男':'女' }}</span>
                </template>
            </commpVxeTable>
            <operation ref="operationRef" @generateListClick="generateListClick" />
        </div>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {
    jcyjpdjjpdjBydelete,
    jcyjpdjexportByJpdj,
    ocalityPostAction,
    jcyjpdjjpdjByScyxrymd,
} from './service/index'
import operation from './operation.vue'
import { ConsoleSqlOutlined } from '@ant-design/icons-vue'
export default {
    components:{
        commpVxeTable,
        operation,
    },
    props:{

    },
    data(){
        return{
            formState:{
                fmaletxnl:60,
                ffemaletxnl:55,
            },
            refreshTable:null,
            config:{
                api: assessCheckApi.jcyjpdjjpdjPageList,
                rowId: 'id',
                paramet:{
                }
            },
            columnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                width:185,
                
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
                titleInterval:true,
                slots: {
                    header:'realname_header',
                },
                width:70,
            },{
                title: '性别', //列头显示文字
                field: 'sex',
                titleInterval:true,
                slots: {
                    header:'sex_header',
                    default:'sex_default',
                },
                width:70,
            },{
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
            },{
                title: '年龄', //列头显示文字
                field: 'fnl',
                titleInterval:true,
                slots: {
                    header:'fjhnd_header',
                },
                width:70,
            },{
                title: '审评类型', //列头显示文字
                field: 'fjcyxl',
            },{
                title: '备注', //列头显示文字
                field: 'fbz',
            }],
            formItem:[{
                label: '关键字',
                model: 'gjz',
            }],
            selectIdArr:[],
            searchEventData:{},
        }
    },
    watch:{

    },
    mounted(){
        ocalityPostAction({dictName:'男职工退休年龄'}).then(res=>{
            if(res.code == 200){
                if(res.result && res.result.length){
                    this.formState.fmaletxnl = res.result[0].itemValue
                }
                ocalityPostAction({dictName:'女职工退休年龄'}).then(res1=>{
                    if(res1.code == 200){
                        if(res1.result && res1.result.length){
                            this.formState.ffemaletxnl = res1.result[0].itemValue
                            this.generateListData()
                        }
                    }else{
                        this.generateListData()
                    }
                })
            }else{

                this.generateListData()
            }
        })

        
    },
    methods:{
        checkboxChange(rowList){
            this.selectIdArr = []
            rowList.forEach((item,index)=>{
                this.selectIdArr.push(item.id)
            })
        },
        searchEvent(row1,row2){
            this.selectIdArr = []
            //console.log(row1,row2)
            this.searchEventData = {
                ...row1,
                ...row2
            }
        },
        generateListData(){
            jcyjpdjjpdjByScyxrymd(this.formState).then(res=>{
                if(res.code == 200){
                        this.config.paramet = {
                    ...this.formState
                }
                this.refreshTable = Date.now()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        generateListClick(){
            this.config.paramet = {
                ...this.formState
            }
            this.refreshTable = Date.now()
        },
        unbindClick(){
            if(this.selectIdArr.length){
                this.$refs.operationRef.getData({ids:this.selectIdArr.join(',')})
                this.$refs.operationRef.visible = true
            }else{
                this.$message.warning('请先选择解聘人员')
            }
        },
        exportClick(){
            jcyjpdjexportByJpdj({ids:this.selectIdArr.join(','),...this.searchEventData}).then(res=>{
                if (!res) {
                    this.$message.warning('文件导出失败')
                    return
                }else{
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([res], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '解聘登记名单' + '.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) //下载完成移除元素
                        window.URL.revokeObjectURL(url) //释放掉blob对象
                    }
                }
            })
        },
        deleteClick(){
            let that = this
            if(this.selectIdArr.length){
                this.$confirm({
                    title:'您确认删除吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyjpdjjpdjBydelete({ids:that.selectIdArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.refreshTable = Date.now()
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择删除项')
            }
        },
    }
}
</script>